<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/style.css">
    <title></title>
    <style>
        .j10_left_video {
            width: 1340px;
            height: 402px;
            padding: 0 25px;
        }

        .change_btn_box {
            float: left;
            width: 220px;
            padding-top: 25px;
        }

        .change_btn_box .change_btn {
            background-image: url("./102control_bg.png");
            background-size: 100%;
            width: 182px;
            height: 35px;
            line-height: 35px;
            color: #fff;
            padding-left: 27px;
            margin-bottom: 20px;
            cursor: pointer;
        }

        .change_video_box {
            /*float: right;*/
            /*width: 1023px;*/
            height: auto;
        }

        .change_video_item {
            /*width: 1023px;*/
        }

        .change_video_box video {
            width: 296px;
            height: 195px;
            margin-right: 22px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body style="overflow: hidden;">
<div class="j10_left_video">
    <div class="change_video_box">
        <div class="change_video_item fix">
          <video controls muted src="../../video/bg_toutiao.mp4"></video>
          <video controls muted src="../../video/bg_toutiao.mp4"></video>
          <video controls muted src="../../video/bg_toutiao.mp4"></video>
          <video controls muted src="../../video/bg_toutiao.mp4"></video>
          <video controls muted src="../../video/bg_toutiao.mp4"></video>
          <video controls muted src="../../video/bg_toutiao.mp4"></video>
          <video controls muted src="../../video/bg_toutiao.mp4"></video>
          <video controls muted src="../../video/bg_toutiao.mp4"></video>
        </div>
    </div>
</div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script src="../../js/common.js"></script>
<script>
	$(function () {
		// let arr = [1, 2, 3, 4, 5]
		// for (let i = 0; i < 8; i++) {
		// 	$('.change_video_item').append(`<iframe src="http://172.16.3.123:6025/hls-test/player.html?stream=${arr[i % 5]}"></iframe>`)
		// }

		// getJson('api/DATA-MANAGE/hk/artemis/getHls', {}, function (res) {
		// 	if (res.code === 200) {
		// 		let arr = res.data;
		// 		for (let i = 0; i < 8; i++) {
		// 			$('.change_video_item').append(`<iframe src="http://172.16.3.123:6025/hls-test/player.html?stream=${arr[i % arr.length]}&overflow-hidden=1"></iframe>`)
		// 		}
		// 	}
		// })


		/*$.ajax({
			type: 'post',
			url: 'http://172.16.3.123:6025/api/DATA-MANAGE/hk/artemis/getHls',
			data: JSON.stringify(['91b395051b7b4e9bab795addc384f4c5', '60d2822ae0564bf3a32c6fc687d19a6d', 'd9441752bbd24a808c77f6f997c534a2', 'c179a2c3d330451786e28a5642b63d63', 'ea462a3c98bf4dc2af7a307cbd3d6c0b', '01329393231f4abeb24ee82cfe1c7b26', 'b5ef38a9f21d47bca5797c8818d4a640', 'e81ab2524fe74d57a13cca742ef00889']),
			dataType: 'json',
			contentType: 'application/json',
			success: function (res) {
				if (res.code === 200) {
					let arr = res.data;
					for (let i = 0; i < arr.length; i++) {
						$('.change_video_item').append(`<iframe src="http://172.16.3.123:6025/hls-test/player.html?stream=${arr[i]}&overflow-hidden=1"></iframe>`)
					}
				}
			},
			error: function (msg) {

			}
		});*/

	})

</script>
</html>
